<template>
  <view class="flex-1">
    <u-input v-model="showValue" :placeholder="placeholder" type="select" :border="false" @click="show = true"
      :select-open="show" :input-align="inputAlign" />
    <!-- <u-select v-model="show" :label-name="labelName" :value-name="valueName" :list="list" :default-value="defaultVal"
      @confirm="selectConfirm"></u-select> -->
    <u-popup v-model="show" mode="right" :closeable="true" width="500rpx">
      <view>
        <view style="height:136rpx" class=" flex items-center justify-center font-bold">请选择</view>
        <view class="px-3 pb-3">
          <u-search v-model="searchWord" :show-action="false"></u-search>
        </view>
        <scroll-view :scroll-y="true" :style="{height: 'calc(100vh - 340rpx)'}">
          <view class="px-3">
            <view v-for="(item,index) in dataList" :key="index" @click="selectConfirm(item,index)"
              class="py-1.5 px-3 border-b flex items-center justify-between">
              <view>
                {{item[labelName]}}
              </view>
              <view v-if="value.indexOf(item[valueName])>-1">
                <u-icon name="checkbox-mark" size="40" class="mr-1 text-green-600"></u-icon>
              </view>
            </view>
          </view>
        </scroll-view>
        <view style="height:100rpx" class="flex items-center">
          <u-button type="primary" size="medium" @click="show = false">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>

</template>

<script>
import { arrayToString } from '../../utils/stringUtil'
export default {
  name: "yer-side-select-mutil",
  props: {
    list: {
      type: Array,
      default: () => [],
    }, //字典的数组集合
    defaultValue: "", //默认显示的字典，传字典的代码项
    defaultValueExtra: "", //默认显示的字典，传字典的代码项
    inputAlign: {
      type: String,
      default: "left",
    }, //input内容对齐方式三种：left  center  right  默认left
    placeholder: {
      type: String,
      default: "请选择",
    },
    labelName: {
      type: String,
      default: "label",
    },
    valueName: {
      type: String,
      default: "value",
    }
  },
  emits: ["update:modelValue", "update:label", "input", "change"],
  data() {
    return {
      showValue: "",
      value: [], //字典展示的值，对应的是字典名称
      show: false, //控制select弹框的显示
      current: [], // 当前选中的下标
      searchWord: '', // 搜索关键字
      dataList: '' // 
    };
  },
  methods: {
    clear() {
      this.showValue = "";
      this.value = "";
    },
    selectConfirm(e, index) {
      // console.log("select设置值",e);
      // 判断已选择的数组里面是否含有当前选中的值
      // console.log('this.value',this.value);
      const valueIndex = this.value.indexOf(e[this.valueName])
      if (valueIndex > -1) {
        // 如果存在就删除
        this.value.splice(valueIndex, 1)
      } else {
        // 不存在就增加
        this.value.push(e[this.valueName])
      }

      for (let i = 0; i < this.dataList.length; i++) {
        // this.value = this.dataList[i]
      }

      this.showValue = this.translateDict(this.value,this.list)
      // console.log('showValue: ' + this.showValue);
      this.$emit("update:modelValue", arrayToString(this.value,','));
      // this.$emit("input", e[this.valueName]);
      this.$emit("update:label", this.showValue);
      // 增加一个change事件
      // this.$emit("change", e);
      //选择后把默认值设为当前选择的
      // this.current = index
      // 关闭显示
      // this.show = false
    },
    translateDict(valueArr, list) {
      const _this = this
      let str = ''
      valueArr.forEach((item) => {
        for (let i = 0; i < list.length; i++) {
          if (item == list[i][_this.valueName]) {
            str += list[i][_this.labelName] + ','
            break
          }
        }
      })
      if (str.length > 0) str = str.substring(0, str.length - 1)
      return str
    }
  },
  watch: {
    searchWord: function (newVal, oldVal) {
      this.dataList = []
      if (!newVal) {
        this.dataList = this.$u.deepClone(this.list)
      } else {
        this.list.forEach(item => {
          if (item[this.labelName].indexOf(newVal) > -1) {
            this.dataList.push(item)
          }
        })
      }
      // 把current设置成当前列表对应的下标  如果没有匹配到就不变化
      this.dataList.forEach((item, index) => {
        if (item[this.valueName] == this.value) {
          this.current = index
        }
      })
    },
    defaultValue: {
      immediate: true,
      handler: function (newVal, oldVal) {
        // console.log('default', newVal);
        let val = newVal;
        if (!newVal) {
          val = oldVal;
        }
        if(this.defaultValue){
          this.value = this.defaultValue.split(',')
        }
        // 页面展示初始化
        if (this.list) {
          this.showValue = this.translateDict(this.value, this.list)
        }
      },
    },
    list: {
      immediate: true,
      handler: function (newVal, oldVal) {
        // console.log('list', newVal);
        if (newVal) {
          let val = this.defaultValue;
          this.dataList = this.$u.deepClone(newVal)
          // 页面展示初始化
          if (this.defaultValue) {
            this.showValue = this.translateDict(this.value, this.list)
          }

        }

      },
    }
  }
};
</script>

<style scoped>
.flex-1{
  flex:1
}
.flex{
  display: flex;
}
.items-center{
  align-items: center
}
.justify-center{
  justify-content: center
}
.justify-between{
  justify-content: space-between;
}
.font-bold{
  font-weight: bold
}
.py-1\.5{
  padding: 12rpx 0;
}
.px-3{
  padding: 0 24rpx;
}
.mr-1{
  margin-right: 8rpx;
}
.text-green-600{
  color: #059669 ;
}
.border-b{
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(229 231 235);
}
.pb-3{
  padding-bottom: 24rpx;
}
</style>
